<!DOCTYPE html><html lang="zh-CN"><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>测试数据集生成器</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#2A5C9A',
            secondary: '#4CAF50',
            neutral: '#607D8B',
            error: '#F44336',
            warning: '#FFC107'
          }
        }
      }
    }
  </script>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
      background-color: #f5f7fa;
      padding: 10px;
    }
    
    .container {
      width: 1440px;
      margin: 0 auto;
      background: white;
      box-shadow: 0 4px 20px rgba(0,0,0,0.08);
      display: flex;
      flex-direction: column;
      min-height: calc(100vh - 20px);
    }
    
    header, footer {
      background: white;
      padding: 16px 32px;
    }
    
    main {
      display: flex;
      flex: 1;
      height: calc(100% - 120px);
    }
    
    #config-panel {
      width: 30%;
      border-right: 1px solid #eee;
      padding: 24px;
    }
    
    #field-editor {
      width: 70%;
      padding: 24px;
      overflow: auto;
    }
    
    .drag-area {
      border: 2px dashed #ccc;
      padding: 32px;
      text-align: center;
      border-radius: 4px;
      margin: 16px 0;
      transition: all 0.3s;
      color: #607D8B;
      cursor: pointer;
    }
    
    .drag-area.active {
      border-color: #2A5C9A;
      background: #f0f7ff;
    }
    
    .slider-container {
      margin: 24px 0;
    }
    
    input[type="range"] {
      width: 100%;
      height: 6px;
      background: #e0e0e0;
      border-radius: 3px;
      outline: none;
      -webkit-appearance: none;
    }
    
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 20px;
      height: 20px;
      background: #2A5C9A;
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    input[type="range"]::-webkit-slider-thumb:hover {
      background: #1e4877;
      transform: scale(1.1);
    }
    
    .rule-btn {
      background: transparent;
      border: none;
      width: 24px;
      height: 24px;
      cursor: pointer;
      color: #607D8B;
      transition: all 0.3s;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .rule-btn:hover {
      color: #2A5C9A;
      background: #f0f7ff;
    }
    
    .btn {
      padding: 10px 24px;
      border-radius: 4px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: none;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .btn-primary {
      background: #2A5C9A;
      color: white;
    }
    
    .btn-primary:hover {
      background: #1e4877;
    }
    
    .btn-secondary {
      background: #4CAF50;
      color: white;
    }
    
    .btn-secondary:hover {
      background: #3d8b40;
    }
    
    .btn-gray {
      background: #f0f0f0;
      color: #555;
    }
    
    .btn-gray:hover {
      background: #e0e0e0;
    }
    
    /* 表格样式 */
    .field-table {
      width: 100%;
      border-collapse: collapse;
      border-spacing: 0;
      margin-top: 16px;
    }
    
    .field-table th {
      text-align: left;
      padding: 12px 16px;
      background: #f5f7fa;
      font-weight: 600;
    }
    
    .field-table td {
      padding: 12px 16px;
      border-bottom: 1px solid #eee;
    }
    
    .field-table tr:nth-child(odd) {
      background: #fafafa;
    }
    
    .field-table tr:hover {
      background: #f0f7ff;
    }
    
    select, input[type="text"] {
      padding: 8px 12px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 14px;
      width: 100%;
      transition: all 0.3s;
    }
    
    select:focus, input[type="text"]:focus {
      border-color: #2A5C9A;
      box-shadow: 0 0 0 2px rgba(42, 92, 154, 0.2);
      outline: none;
    }
    
    .modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s;
    }
    
    .modal.active {
      opacity: 1;
      pointer-events: all;
    }
    
    .modal-content {
      background: white;
      border-radius: 8px;
      width: 500px;
      max-width: 90%;
      max-height: 80vh;
      overflow: auto;
      box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    }
    
    /* 进度条 */
    .progress-container {
      margin: 16px 0;
      background: #e0e0e0;
      height: 10px;
      border-radius: 5px;
      overflow: hidden;
    }
    
    .progress-bar {
      height: 100%;
      background: #4CAF50;
      width: 0;
      transition: width 0.5s;
      border-radius: 5px;
    }
    
    fieldset {
      border: 1px solid #eee;
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 24px;
    }
    
    legend {
      padding: 0 12px;
      color: #607D8B;
      font-weight: 500;
    }
    
    /* 预览图表容器 */
    #preview-container {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.5s;
      margin-top: 24px;
    }
    
    #preview-container.show {
      max-height: 300px;
    }
    
    /* 图标样式调整 */
    .icon {
      margin-right: 8px;
      font-size: 1.2em;
      vertical-align: middle;
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- 头部区域 -->
    <header class="flex justify-between items-center border-b border-gray-100 py-4">
      <h1 class="text-2xl font-bold text-primary">测试数据集生成器</h1>
      <div>
        <button class="btn btn-gray mr-3">
          <iconify-icon icon="mdi:login" class="icon"></iconify-icon>登录
        </button>
        <button class="btn btn-primary">
          <iconify-icon icon="mdi:account-plus" class="icon">注册
        </iconify-icon></button>
      </div>
    </header>
    
    <!-- 主体内容区域 -->
    <main>
      <!-- 左侧配置面板 (30%) -->
      <div id="config-panel">
        <fieldset>
          <legend>基本配置</legend>
          
          <div class="slider-container">
            <label class="block text-sm text-gray-600 mb-2">生成数据量: <span id="data-count">50,000</span> 条</label>
            <input type="range" min="1000" max="1000000" value="50000" id="data-slider">
          </div>
          
          <div class="mb-6">
            <label class="block text-sm text-gray-600 mb-2">生成模式</label>
            <div class="flex">
              <label class="flex-1 mr-2">
                <input type="radio" name="mode" value="online" checked="" class="mr-2">
                在线生成
              </label>
              <label class="flex-1">
                <input type="radio" name="mode" value="offline" class="mr-2">
                离线下载
              </label>
            </div>
          </div>
        </fieldset>
        
        <fieldset>
          <legend>数据源</legend>
          <div id="drag-area" class="drag-area">
            <iconify-icon icon="mdi:database-import" style="font-size: 48px; margin-bottom: 12px;"></iconify-icon>
            <h3 class="font-medium mb-2">拖放SQL文件到此处或点击上传</h3>
            <p class="text-xs text-gray-500 mb-4">支持导入.sql文件自动解析表结构</p>
            <button class="btn btn-gray">
              <iconify-icon icon="mdi:file-upload" class="icon"></iconify-icon>选择文件
            </button>
          </div>
        </fieldset>
        
        <fieldset>
          <legend>数据存储</legend>
          <div>
            <label class="block text-sm text-gray-600 mb-2">保存周期</label>
            <select class="mb-4">
              <option value="7">7天（免费用户）</option>
              <option value="30">30天（高级会员）</option>
              <option value="0">永久保存（白金会员）</option>
            </select>
          </div>
          <div>
            <label class="block text-sm text-gray-600 mb-2">文件格式</label>
            <select>
              <option value="csv">CSV格式</option>
              <option value="json">JSON格式</option>
              <option value="sql">SQL格式</option>
              <option value="excel">Excel格式</option>
            </select>
          </div>
        </fieldset>
      </div>
      
      <!-- 右侧字段编辑区 (70%) -->
      <div id="field-editor">
        <h2 class="text-xl font-semibold mb-4">字段规则配置</h2>
        
        <table class="field-table">
          <thead>
            <tr>
              <th>字段名</th>
              <th style="width: 20%">数据类型</th>
              <th style="width: 15%">长度</th>
              <th style="width: 20%">约束</th>
              <th style="width: 15%">规则配置</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>用户ID</td>
              <td>
                <select>
                  <option>INTEGER</option>
                  <option>STRING</option>
                  <option>UUID</option>
                  <option selected="">BIGINT</option>
                  <option>FLOAT</option>
                </select>
              </td>
              <td><input type="text" value=""></td>
              <td>PRIMARY KEY, NOT NULL</td>
              <td>
                <button class="rule-btn" onclick="openRuleModal(0)">
                  <iconify-icon icon="mdi:cog"></iconify-icon>
                </button>
              </td>
            </tr>
            <tr>
              <td>姓名</td>
              <td>
                <select>
                  <option>INTEGER</option>
                  <option selected="">STRING</option>
                  <option>UUID</option>
                  <option>BIGINT</option>
                  <option>FLOAT</option>
                </select>
              </td>
              <td><input type="text" value="32"></td>
              <td>NOT NULL</td>
              <td>
                <button class="rule-btn" onclick="openRuleModal(1)">
                  <iconify-icon icon="mdi:cog"></iconify-icon>
                </button>
              </td>
            </tr>
            <tr>
              <td>邮箱地址</td>
              <td>
                <select>
                  <option>INTEGER</option>
                  <option selected="">STRING</option>
                  <option>UUID</option>
                  <option>BIGINT</option>
                  <option>FLOAT</option>
                </select>
              </td>
              <td><input type="text" value="64"></td>
              <td>UNIQUE, NOT NULL</td>
              <td>
                <button class="rule-btn" onclick="openRuleModal(2)">
                  <iconify-icon icon="mdi:cog"></iconify-icon>
                </button>
              </td>
            </tr>
            <tr>
              <td>用户状态</td>
              <td>
                <select>
                  <option>INTEGER</option>
                  <option>STRING</option>
                  <option>BOOLEAN</option>
                  <option selected="">ENUM</option>
                  <option>FLOAT</option>
                </select>
              </td>
              <td><input type="text" value="10"></td>
              <td>DEFAULT 'active'</td>
              <td>
                <button class="rule-btn" onclick="openRuleModal(3)">
                  <iconify-icon icon="mdi:cog"></iconify-icon>
                </button>
              </td>
            </tr>
            <tr>
              <td>注册时间</td>
              <td>
                <select>
                  <option>INTEGER</option>
                  <option>STRING</option>
                  <option>BOOLEAN</option>
                  <option>DATE</option>
                  <option selected="">TIMESTAMP</option>
                </select>
              </td>
              <td><input type="text" value=""></td>
              <td>NOT NULL</td>
              <td>
                <button class="rule-btn" onclick="openRuleModal(4)">
                  <iconify-icon icon="mdi:cog"></iconify-icon>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
        
        <!-- 规则配置模态框 -->
        <div id="rule-modal" class="modal">
          <div class="modal-content">
            <div class="p-6">
              <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-bold">规则配置 - <span id="field-name">用户ID</span></h3>
                <button onclick="closeModal()" class="text-gray-500 hover:text-gray-700">
                  <iconify-icon icon="mdi:close" style="font-size:24px"></iconify-icon>
                </button>
              </div>
              
              <div class="mb-6">
                <label class="block text-sm font-medium mb-2">规则类型</label>
                <select class="w-full">
                  <option>正则表达式</option>
                  <option selected="">范围配置</option>
                  <option>枚举值</option>
                  <option>自定义脚本</option>
                  <option>模式生成</option>
                </select>
              </div>
              
              <div class="mb-6">
                <label class="block text-sm font-medium mb-2">配置选项</label>
                <!-- 根据规则类型变化的内容 -->
                <div id="rule-config-area">
                  <div class="grid grid-cols-2 gap-4">
                    <div>
                      <label class="block text-sm text-gray-600 mb-1">最小值</label>
                      <input type="text" value="1000" class="w-full" placeholder="最小值">
                    </div>
                    <div>
                      <label class="block text-sm text-gray-600 mb-1">最大值</label>
                      <input type="text" value="9999" class="w-full" placeholder="最大值">
                    </div>
                  </div>
                  <div class="mt-4">
                    <label class="flex items-center">
                      <input type="checkbox" class="mr-2">
                      允许为空值
                    </label>
                    <label class="flex items-center mt-2">
                      <input type="checkbox" class="mr-2" checked="">
                      唯一值约束
                    </label>
                  </div>
                </div>
              </div>
              
              <div class="bg-gray-50 p-4 rounded">
                <label class="block text-sm font-medium mb-2">预览</label>
                <div class="text-sm text-gray-700">
                  ID值范围: <span class="font-mono">1000 ~ 9999</span><br>
                  唯一值: 是<br>
                  空值: 不允许
                </div>
              </div>
              
              <div class="flex justify-end space-x-3 mt-6">
                <button class="btn btn-gray" onclick="closeModal()">取消</button>
                <button class="btn btn-primary" onclick="applyRule()">应用规则</button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 数据生成预览 -->
        <div id="preview-container">
          <div class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-bold">生成数据预览</h3>
            <button class="btn btn-primary btn-sm" id="toggle-chart">
              查看图表
            </button>
          </div>
          
          <div id="chart-preview" style="height:260px;"></div>
        </div>
      </div>
    </main>
    
    <!-- 底部操作栏 -->
    <footer class="border-t border-gray-100 py-4">
      <div class="flex items-center justify-between">
        <button class="btn btn-gray">
          <iconify-icon icon="mdi:history" class="icon"></iconify-icon>历史生成记录
        </button>
        
        <div>
          <div class="progress-container mb-3">
            <div class="progress-bar" id="progress-bar"></div>
          </div>
          <span id="progress-text" class="text-sm text-gray-600">准备生成数据...</span>
        </div>
        
        <button class="btn btn-secondary" id="generate-btn">
          <iconify-icon icon="mdi:database-sync" class="icon"></iconify-icon>生成测试数据
        </button>
      </div>
    </footer>
  </div>

  <script>
    // 数据量滑块控制
    const dataSlider = document.getElementById('data-slider');
    const dataCount = document.getElementById('data-count');
    
    dataSlider.addEventListener('input', function() {
      const count = Number(this.value);
      dataCount.textContent = count.toLocaleString();
    });
    
    // 拖拽区域交互
    const dragArea = document.getElementById('drag-area');
    
    dragArea.addEventListener('dragover', (e) => {
      e.preventDefault();
      dragArea.classList.add('active');
    });
    
    dragArea.addEventListener('dragleave', () => {
      dragArea.classList.remove('active');
    });
    
    dragArea.addEventListener('drop', (e) => {
      e.preventDefault();
      dragArea.classList.remove('active');
      const file = e.dataTransfer.files[0];
      handleFile(file);
    });
    
    function handleFile(file) {
      console.log('文件已选择:', file.name);
      dragArea.innerHTML = `
        <div class="text-green-600 mb-4">
          <iconify-icon icon="mdi:check-circle" style="font-size: 48px;"></iconify-icon>
        </div>
        <h3 class="font-medium">文件解析成功</h3>
        <p class="text-sm text-gray-600">${file.name} (${(file.size/1024).toFixed(1)} KB)</p>
        <p class="text-xs text-green-600 mt-4">已解析出5个字段结构</p>
      `;
    }
    
    // 模态框控制
    function openRuleModal(index) {
      const modal = document.getElementById('rule-modal');
      const fieldName = document.querySelectorAll('.field-table tbody td')[index*5].textContent;
      document.getElementById('field-name').textContent = fieldName;
      modal.classList.add('active');
    }
    
    function closeModal() {
      document.getElementById('rule-modal').classList.remove('active');
    }
    
    function applyRule() {
      closeModal();
      // 这里可以添加规则应用的逻辑
    }
    
    // 生成数据进度
    const generateBtn = document.getElementById('generate-btn');
    const progressBar = document.getElementById('progress-bar');
    const progressText = document.getElementById('progress-text');
    const previewContainer = document.getElementById('preview-container');
    
    generateBtn.addEventListener('click', function() {
      let progress = 0;
      progressBar.style.width = '0%';
      progressText.textContent = '开始生成数据...';
      
      const interval = setInterval(() => {
        progress += Math.random() * 5;
        if (progress > 100) progress = 100;
        progressBar.style.width = progress + '%';
        
        if (progress < 30) {
          progressText.textContent = `准备数据源 (${Math.round(progress)}%)...`;
        } else if (progress < 70) {
          progressText.textContent = `生成测试数据 (${Math.round(progress)}%)...`;
        } else {
          progressText.textContent = `进行数据校验 (${Math.round(progress)}%)...`;
        }
        
        if (progress >= 100) {
          clearInterval(interval);
          progressText.textContent = '数据生成完成!';
          
          // 显示预览
          previewContainer.classList.add('show');
          initChart();
        }
      }, 200);
    });
    
    // 初始化图表
    function initChart() {
      const chartDom = document.getElementById('chart-preview');
      const myChart = echarts.init(chartDom);
      
      const option = {
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' }
        },
        xAxis: {
          type: 'category',
          data: ['用户ID', '姓名', '邮箱', '状态', '时间'],
          axisLabel: {
            interval: 0,
            rotate: 0
          }
        },
        yAxis: { type: 'value' },
        series: [
          {
            name: '字段分布',
            type: 'bar',
            barWidth: '45%',
            data: [
              { value: 1253, itemStyle: { color: '#2A5C9A' } },
              { value: 914, itemStyle: { color: '#4CAF50' } },
              { value: 867, itemStyle: { color: '#FFC107' } },
              { value: 1032, itemStyle: { color: '#9C27B0' } },
              { value: 769, itemStyle: { color: '#F44336' } }
            ]
          }
        ]
      };
      
      myChart.setOption(option);
      
      // 响应窗口变化
      window.addEventListener('resize', function() {
        myChart.resize();
      });
    }
    
    // 模态框关闭事件
    window.onclick = function(event) {
      const modal = document.getElementById('rule-modal');
      if (event.target === modal) {
        closeModal();
      }
    };
  </script>

</body></html>